<template>  
  <el-table :data="tableData" height="450" style="width: 100%" :row-class-name="tableRowClassName">  
    <el-table-column prop="subject" label="科目" width="120" />  
    <el-table-column prop="averageScore" label="平均分" width="120" />  
    <el-table-column prop="passRate" label="及格率" width="120" />  
  </el-table>  
</template>  

<script lang="ts" setup>  
interface SubjectData {  
  subject: string;  
  averageScore: number;  
  passRate: string;  
}  

const tableData: SubjectData[] = [  
  { subject: '语文', averageScore: 85, passRate: '75%' },  
  { subject: '数学', averageScore: 78, passRate: '50%' },  
  { subject: '英语', averageScore: 92, passRate: '98%' },  
  { subject: '物理', averageScore: 76, passRate: '60%' },  
  { subject: '化学', averageScore: 80, passRate: '90%' },  
  { subject: '生物', averageScore: 89, passRate: '93%' },  
  { subject: '历史', averageScore: 74, passRate: '80%' },  
  { subject: '地理', averageScore: 82, passRate: '87%' },  
  { subject: '政治', averageScore: 88, passRate: '94%' },  
];  

const tableRowClassName = ({ row }: { row: SubjectData }) => {  
  const passRateValue = parseFloat(row.passRate);  

  if (passRateValue < 60) {  
    return 'red-row'; // 及格率低于60%  
  } else if (passRateValue >= 60 && passRateValue < 70) {  
    return 'yellow-row'; // 及格率在60%~70%  
  } else if (passRateValue >= 90) {  
    return 'green-row'; // 及格率在90%以上  
  } else {  
    return ''; // 其他情况  
  }  
}  
</script>  

<style>  
.el-table .red-row {  
  --el-table-tr-bg-color: #ffcccc; /* 红色 */  
}  
.el-table .yellow-row {  
  --el-table-tr-bg-color: #fff6cc; /* 黄色 */  
}  
.el-table .green-row {  
  --el-table-tr-bg-color: #ccffcc; /* 绿色 */  
}  
</style>